import React from "react";
import { List } from "./list";
import { SearchPanel } from "./search-panel";
import { useDebounce, useDocumentTitle } from "../../utils";
import styled from "@emotion/styled";
import { useProjects } from "../../utils/project";
import { useUsers } from "../../utils/user";
import { useProjectModal, useProjectSearchParams } from "./util";
import { ButtonNoPadding, ErrorBox, Row } from "../../components/lib";

export const ProjectListScreen = () => {
    useDocumentTitle("项目列表", false);
    // 获取用户输入的查询参数param 以及修改它的函数setParam
    const [param, setParam] = useProjectSearchParams();
    const {
        isLoading,
        error,
        data: list,
    } = useProjects(useDebounce(param, 200));
    const { data: users } = useUsers();
    const { open } = useProjectModal()

    return (
        <Container>
            <Row between={true}>
                <h1>项目列表</h1>
                <ButtonNoPadding onClick={open} type={"link"}>
                    创建项目
                </ButtonNoPadding>
            </Row>
            <SearchPanel
                users={users || []}
                param={param}
                setParam={setParam}
            />
            <ErrorBox error={error}></ErrorBox>
            <List
                loading={isLoading}
                users={users || []}
                dataSource={list || []}
            />
        </Container>
    );
};

ProjectListScreen.whyDidYouRender = false;

const Container = styled.div`
    padding: 3.2rem;
`;
